<template>
	<view class="content">
		<view style="z-index: 10; width: 100%; position: fixed;background-color: #FFFFFF;">
			<projectSelect :showIcon="false" :projectName="project_name"></projectSelect>
			<view class="section-1">
				<banner @toPlace="toPlace" :info="info" ref="banner" :project_minid=project_minid></banner>
			</view>
			<HeaderCharts :projectId="project_id" :projectType="1" :analysisProps="analysis"></HeaderCharts>
			<view class="choose">
				<view class="btns">
					<view @click="handleMark(item.state)" :class="`btn`" :style="{backgroundColor: item.color}"
						v-for="(item, key) in btnList" :key="key">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view style="height: 800rpx;"></view>
		<view class="section-0">
			<!-- this.project_id -->
			<view class="section-body">
				<view class="wrapper wrapper-title"
					v-for="(item, idx1) in data" :key="item.name + idx1">
					<view class="title">{{item.name}}
						<view v-if="item.children && item.children.length > 0" :class="`action item__${item.state}`">
							<view class="check-name" v-if="project_name == ''">全选</view>
							<view v-if="project_name == ''" @click="handleSelect(idx1, item.children && item.children.length > 0)"
								:class="`check ${selected.findIndex(e => e === idx1) !== -1 ? 'check__active' : ''}`">
								<view class="check-on"></view>
							</view>
							<view @click="expandChange(idx1)"
								:class="`iconfont icon-xiangyou1 expand ${expandList.indexOf(idx1) !== -1 ? 'expand__active' : ''}`">
							</view>
						</view>
					</view>
					<view class="value l-value">
						<view class="checkbox-group">
							<view class="clear_both" v-if="expandList.indexOf(idx1) === -1">
								<view
									:class="`checkbox-item ${item2.children && item2.children.length  ? 'checkbox-item__has' : ''}`"
									v-for="(item2, idx2) in item.children" :key="item2.name + idx2"
									v-show="project_name == '' || item2.state != '4'"
									>
									<view style="overflow: hidden;margin-bottom: 25rpx;"
										:class="`item__${item2.state ? item2.state: 1}`">
										<view class="left">
											{{item2.name}}
										</view>
										<view class="right">
											<text class="check-name">全选</text>
											<view
												@click="handleSelect(idx1 + '-' + idx2, item2.children && item2.children.length > 0)"
												:class="`check ${selected.findIndex(e => e === idx1 + '-' + idx2) !== -1 ? 'check__active' : ''}`">
												<view class="check-on"></view>
											</view>
											<view @click="expandChange(`${idx1}-${idx2}`)"
												:class="`iconfont icon-xiangyou1 expand ${expandList.indexOf(idx1 + '-' + idx2) !== -1 ? 'expand__active' : ''}`">
											</view>
										</view>
									</view>
									<view class="clear_both" v-if="expandList.indexOf(`${idx1}-${idx2}`) !== -1">
										<view v-if="item2.children && item2.children.length > 0"
											:class="`checkbox-item-grad item__${item3.state}`"
											v-for="(item3, idx3) in item2.children" :key="item3.name + idx3">
											<view class="left">
												{{item3.name}}
											</view>
											<view class="right">
												<text class="check-name">全选</text>
												<view @click="handleSelect(idx1 + '-' + idx2 + '-' +idx3, false)"
													:class="`check ${selected.findIndex(e => e === idx1 + '-' + idx2 + '-' +idx3) !== -1 ? 'check__active' : ''}`">
													<view class="check-on"></view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
			<view class="form upload-wrap" style="margin-bottom: 16rpx;">
				<view class="form-label" style="width: 140rpx;">
					<view class="label">现场照片：</view>
				</view>
				<view class="form-item"
					:style="{border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', width: '440rpx', height: 'auto'}">
					<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
						multiple :maxCount="1"
						:style="{position:'relative',height: fileList.length == 0 ? '44rpx' : 'unset', borderRadius: '20rpx'}">
						<view class="iconfont icon-tupian"></view>
					</u-upload>
				</view>
			</view>
			<view class="form" style="margin-bottom: 16rpx;">
				<view class="form-label" style="width: 140rpx;">
					<view class="label">图片描述：</view>
				</view>
				<view class="form-item" style="width: 440rpx;">
					<view class="input-2">
						<u--input
							placeholderClass="input-placeholder"
							class="input-body"
						    placeholder="请输入图片描述"
						    v-model="remark"
						  ></u--input>
						  <!-- <view class="iconfont">km</view> -->
					</view>
				</view>
			</view>
			<!-- <view class="form" style="margin-bottom: 16rpx;">
				<view class="form-label" style="width: 140rpx;">
					<view class="label">问题描述：</view>
				</view>
				<view class="form-item" style="width: 440rpx;">
					<view class="input-2">
						<u--input
							placeholderClass="input-placeholder"
							class="input-body"
						    placeholder="请输入问题描述"
							v-model="describe"
						  ></u--input>
						  <view class="iconfont">km</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="custom-button" @click="goImgs('/pages/work/manager/work_manage/progress/info/imgs/index')">查看历史图片</view>
		<view style="height: 50px;"></view>
		<view class="dw" v-show="show != 1">
			<view class="tijiao" @click="submit()">提交进度上报</view>
		</view>
	</view>
</template>

<script>
	import {
		processAddApi,
		processListApi,
	} from '@/api/report.js'
	import HeaderCharts from '../component/header.vue'
	import projectSelect from '@/components/project_select/index.vue';
			import banner from '@/components/banner/index.vue';
	import {
		mapGetters
	} from 'vuex';
	import treeData from './data.js'
	import { uploadUrl } from '@/baseUrl.js';
	export default {
		components: {
			HeaderCharts, projectSelect,banner
		},
		data() {
			return {
				show: '',
				project_id: false,
				project_minid:"",
				project: [],
				message: '', //页面信息
				btnList: {
					notStart: {
						name: '未开始',
						color: '#ff7c66',
						state: 1
					},
					build: {
						name: '在建',
						color: '#00cdb4',
						state: 2
					},
					finish: {
						name: '完成',
						color: '#4e74fa',
						state: 3
					},
					notInvolved: {
						name: '本项目不涉及',
						color: '#b9b8be',
						state: 4
					},
				},
				selected: [],
				expandList: [],
				data: [],
				parent: [],
				remark: '',
				fileList: [],
				analysis: {},
				project_name: '',
				describe:'',
				info:{}
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			onReady() {
				this.$refs.banner.fetchList()
			},
			expandChange(idxs) {
				const index = this.expandList.indexOf(idxs);
				if (index !== -1) {
					this.expandList.splice(index, 1);
				} else {
					this.expandList.push(idxs);
				}
			},
			handleSelect(idxs, checkAll) {
				if (this.project_id) {
					return;
				}
				var that = this
				if (checkAll) {
					let isChecked = this.selected.findIndex(e => e == idxs) !== -1;
					let arr = [];
					let idxDep = String(idxs).split('-');
					if (idxDep.length === 1) {
						that.parent = this.data[idxDep[0]].children;
						that.parent.forEach((item, idx) => {
							arr.push(idxs + '-' + idx);
							if (item.children) {
								item.children.forEach((item2, idx2) => {
									arr.push(idxs + '-' + idx + '-' + idx2);
								})
							}
						})
					};
					if (idxDep.length === 2) {
						arr = this.data[idxDep[0]].children[idxDep[1]].children.map((_, idx) => idxs + '-' + idx)

					};
					arr.forEach(item => {
						let index = this.selected.findIndex(e => e == item);
						if (!isChecked && index === -1) {
							this.selected.push(item);
						}
						if (isChecked && index !== -1) {
							this.selected.splice(index, 1);
						}
					})
				}

				const index = this.selected.findIndex(e => e == idxs);
				if (index !== -1) {
					this.selected.splice(index, 1);
				} else {
					this.selected.push(idxs);
				}

			},
			handleMark(state) {
				if (this.project_id) {
					return;
				}
				if (this.selected.length === 0) {
					return;
				}
				var _list = JSON.parse(JSON.stringify(this.data));

				this.selected.forEach(item => {
					// TODO 递归
					let idxDep = String(item).split('-');
					if (idxDep.length === 2) {
						if (_list[idxDep[0]].children) {
							_list[idxDep[0]].children[idxDep[1]].state = state;
						}
					}
					if (idxDep.length === 3) _list[idxDep[0]].children[idxDep[1]].children[idxDep[2]].state =
						state;
				})
				this.selected = [];
				this.data = _list;

			},
			async submit() {
				/*
				obj.remark = this.remark;
				*/
				let data = JSON.stringify(this.data);
				let j = await processAddApi({
					project_id: this.curProject.id,
					info: data,
					type: 1,
					remark: this.remark,
					describe: this.describe,
					file_id: this.fileList[0] ? this.fileList[0].url : ''
				})
				if (j.code = 1) {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1000
					})
					setTimeout(function() {
						uni.redirectTo({
							url:'/pages/work/manager/work_manage/progress/info/index'
						})
					}, 1000);
					
				}
			},
			genStatistics() {
				const tjArr = ['地基基础', '主体结构', '建筑装饰装修'];
				const dqArr = ['安装', '试验调试'];
				const tj = {
					tj_build: 0,
					tj_finish: 0,
					tj_total: 0,
				};
				const dq = {
					dq_build: 0,
					dq_finish: 0,
					dq_total: 0,
				};
				
				function dep(data) {
					data.forEach(item => {
						if (tjArr.indexOf(item.name) !== -1) {
							if (item.state == 2) tj.tj_build = tj.tj_build + 1;
							if (item.state == 3) tj.tj_finish = tj.tj_finish + 1;
							if (item.state !== 4) tj.tj_total = tj.tj_total + 1;
						}
						if (dqArr.indexOf(item.name) !== -1) {
							if (item.state == 2) dq.dq_build = dq.dq_build + 1;
							if (item.state == 3) dq.dq_finish = dq.dq_finish + 1;
							if (item.state !== 4) dq.dq_total = dq.dq_total + 1;
						}
						if (item.children) {
							dep(item.children);
						}
					})
				}
				dep(this.data);
				this.analysis = {...tj, ...dq};
			
			},
			async processList() {
				let j = await processListApi({
					project_id: this.project_id ? this.project_id : this.curProject.id,
					type: 1
				})
				if (j.data.code == 1) {
					this.describe = j.data.data.describe.describe
					if (j.data.data.data == null) {
						this.data = this.data
					} else {
						this.data = JSON.parse(j.data.data.data.info)
					}
					
					// if (this.projectType == '1') {
						
					// }
					this.genStatistics()

				}
			},
			// 处理图片相关
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
			goImgs(path) {
				uni.navigateTo({
					url: path + '?id=' + (this.project_id ? this.project_id : this.curProject.id)
				})
			},
		},
		onLoad(data) {
			this.show = data.show
			this.data = treeData
			this.info=this.curProject
			// 1:变电站 2:线路 3：输变电
			// this.projectType = this.curProject.project_type;
			if (data.project_id) {
				this.project_id = data.project_id;
				uni.setNavigationBarTitle({
					title: '进度上报'
				});
			}
			this.project_minid = data.project_id;
			if (data.project_name) {
				this.project_name = data.project_name
			}
			this.processList()
		},
	}
</script>

<style lang="scss" scoped>
	.custom-button {
		margin-top: 60rpx;
		margin-bottom: 85rpx;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
	}
	/deep/ {
		.u-swiper {
			border-radius: 0 !important;
		}

		.u-swiper__wrapper__item__wrapper__image {
			border-radius: 0 !important;
		}
	}

	.dw {
		width: 100%;
		position: fixed;
		z-index: 10;
		bottom: 10px;
	}

	.tijiao {

		width: 50%;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		margin-left: 25%;
		text-align: center;
		background-color: #0535d6;
		color: #FFFFFF;
		letter-spacing: 1.5px;
		border-radius: 10px;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);

	}

	// .check {
	// 	float: left;
	// 	box-sizing: border-box;
	// 	border-radius: 50%;
	// 	width: 30rpx;
	// 	height: 30rpx;
	// 	text-align: center;
	// 	line-height: 30rpx;
	// 	border: 3rpx solid #d8d8d5;

	// 	.iconfont {
	// 		font-size: 16rpx;
	// 		color: #fff;
	// 		display: none;
	// 	}
	// }

	// .check__on {
	// 	background-color: #2e5efe;

	// 	.iconfont {
	// 		display: block;
	// 	}
	// }

	.clear_both {
		@include clear();
	}

	.check {
		float: left;
		box-sizing: border-box;
		border-radius: 50%;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		border: 3rpx solid #d8d8d5;
		position: relative;
		transition: 0.3s ease;

		.check-on {
			transition: 0.3s ease;
			opacity: 0;
			transform: scale(0.5);
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 22rpx;
			height: 22rpx;
			background-color: #000000;
		}
	}

	.check__active {
		border: solid 1rpx #000000 !important;

		.check-on {
			background-color: #000000 !important;
			opacity: 1;
			transform: scale(1);
		}
	}

	.expand {
		float: right;
		transform: rotate(90deg);
		font-size: 30rpx;
		margin-left: 32rpx;
		color: #46464a;
		transition: 0.3s ease;
	}

	.expand__active {
		transform: rotate(-90deg);
	}

	.item__1 {

		// 未开始
		.name {
			color: #ff7c66
		}

		.check {
			border: solid 1rpx #ff7c66;

			.check-on {
				background-color: #ff7c66;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.item__2 {

		// 在建
		.name {
			color: #00cdb4;
		}

		.check {
			border: solid 1rpx #00cdb4;

			.check-on {
				background-color: #00cdb4;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.item__3 {

		// 完成
		.name {
			color: #4e74fa;
		}

		.check {
			border: solid 1rpx #4e74fa;

			.check-on {
				background-color: #4e74fa;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.item__4 {

		// 本项目不涉及
		.name {
			color: #b9b8be;
		}

		.check {
			border: solid 1rpx #b9b8be;

			.check-on {
				background-color: #b9b8be;
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.section-0 {
		width: 100%;
		// background-color: #2e5efe;

		.section-body {
			width: 100%;
			background-repeat: no-repeat;
			// border-top-left-radius: 50rpx;
			// border-top-right-radius: 50rpx;
			box-sizing: border-box;
			background-color: #fff;
			padding: 0 40rpx;
		}	
	}
	
	.section-2 {
		padding-top: 30rpx;
		width: 100%;
		border-radius: 35rpx;
		box-sizing: border-box;
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		padding: 25rpx 40rpx;
		margin: 28rpx auto;
		@include clear();
		.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
	
		}
	
		/deep/ .u-upload__wrap {
	
			background-color: transparent;
		}
	
		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}
	
		width: 670rpx;
		background-color: #ffffff;
		margin-bottom: 40rpx;
	
		.form {
			width: 100%;
			text-align: center;
			// padding-top: 40rpx;
			// padding-left: 40rpx;
			box-sizing: border-box;
	
			@include clear();
	
			.form-label {
				display: inline-block;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #46464a;
				float: left;
			}
	
			.form-item {
				display: inline-block;
				float: left;
				width: 464rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				@include clear();
				.input-2{
					width: 100%;
					height: 48rpx;
					border-radius: 20rpx;
					line-height: 48rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					// padding-left: 20rpx;
					text-align: center;
					color: #0535d6;
					position: relative;
					.iconfont{
						top: 0;
						position: absolute;
						right: 25rpx;
						line-height: 44rpx;
						color: #1534ce;
						font-size: 28rpx;
					}
					.input-body{
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0!important;
						border: none;
						padding-left: 30rpx!important;
						padding-right: 30rpx!important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.7);
					}
					.input-placeholder{
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0,0,0,0.5);
					}
					
				}
				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}
	
				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}
	
				.input {
					float: left;
					width: 100%;
	
					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}
	
					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}
	.choose{
		width: 100%;
		background-color: #FFFFFF;
	}
	.btns {
		box-sizing: border-box;
		width: 90%;
		margin: 0 auto;
		padding-top: 15px;
		padding-right: 15rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		
		.btn {
			width: 184rpx;
			height: 48rpx;
			background-color: #00cdb4;
			border-radius: 24rpx;
			text-align: center;
			line-height: 48rpx;
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 25rpx;
		}

		.notStart {
			box-sizing: border-box;
			background-color: #fff;
			color: #3b3c40;
			border: 3rpx solid #3b3c40;
			line-height: 42rpx;
		}
	}

	.content {

		.section-0 {
			margin-bottom: 24rpx;

			.wrapper {
				width: 100%;
				border-radius: 35rpx;
				background-size: cover;
				background-repeat: no-repeat;
				overflow: hidden;
				box-sizing: border-box;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				padding: 28rpx 40rpx;
				margin-bottom: 28rpx;

				.label {
					width: 135rpx;
					float: left;
					font-size: 26rpx;

					font-stretch: normal;
					height: 48rpx;
					line-height: 48rpx;
					letter-spacing: 0px;
					color: #46464a;
				}

				.title {
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;
					padding-bottom: 28rpx;

					.action {
						float: right;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 26rpx;
						color: #46464a;
						font-weight: normal;
						@include clear();

						.check-name {
							float: left;
							margin-right: 8rpx;
						}
					}
				}

				.value {
					float: left;
					width: 445rpx;

					.checkbox-group {
						padding-top: 25rpx;
						@include clear();

						.checkbox-item {
							width: 280rpx;
							float: left;
							margin-bottom: 25rpx;

							&:nth-child(even) {
								float: right;
							}

							.left {
								float: left;
								width: 230rpx;
								font-size: 20rpx;
								line-height: 30rpx;
								color: #3b3c40;
							}

							.right {
								float: right;

								.check-name {
									font-size: 20rpx;
									line-height: 30rpx;
									color: #3b3c40;
									display: none;
									float: left;
									margin-right: 8rpx;
								}

								.iconfont {
									display: none;
								}
							}
						}

						.checkbox-item__has {
							width: 100%;

							.right {
								.check-name {
									display: block;
								}

								.iconfont {
									display: block;
								}
							}

						}

						.checkbox-item-grad {
							width: 280rpx;
							float: left;
							margin-bottom: 25rpx;

							&:nth-child(even) {
								float: right;
							}

							.left {
								float: left;
								width: 230rpx;
								font-size: 18rpx;
								line-height: 30rpx;
								color: #3b3c40;
							}

							.right {
								float: right;

								.check-name {
									font-size: 20rpx;
									line-height: 30rpx;
									color: #3b3c40;
									display: none;
									float: left;
									margin-right: 8rpx;
								}
							}
						}
					}

					.audio {
						width: 50rpx;
						height: 50rpx;
						background-color: #ffffff;
						border-radius: 50%;
						box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
						overflow: hidden;

						.audio-center {
							margin-top: 13rpx;
							margin-left: 13rpx;
							border-radius: 50%;
							width: 24rpx;
							height: 24rpx;
							background-color: #ed451b;
						}
					}

					.upload-wrap {
						width: 100%;
						min-height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						position: relative;

						.iconfont {
							position: absolute;
							right: 25rpx;
							line-height: 44rpx;
							color: #1534ce;
							font-size: 28rpx;
						}
					}

					.date {
						width: 100%;
						height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						line-height: 48rpx;
						position: relative;
						font-size: 26rpx;
						color: rgba(0, 0, 0, 0.7);
						box-sizing: border-box;
						padding-left: 20rpx;
						text-align: center;
						color: #0535d6;

						.iconfont {
							position: absolute;
							right: 25rpx;
							top: 2rpx;
							font-size: 30rpx;
							color: #dad9df;
						}
					}

					.picker {
						width: 100%;
						height: 48rpx;
						border-radius: 20rpx;
						border: solid 2rpx #0535d6;
						line-height: 48rpx;

						text {
							font-size: 26rpx;
							letter-spacing: 0rpx;
							color: rgba(#46464a, 0.5);
							margin-left: 28rpx;
						}

						.iconfont {
							float: right;
							font-size: 32rpx;
						}
					}

					.input {
						padding-top: 18rpx;

						.input-body {
							box-sizing: border-box;
							width: 100%;
							height: 44rpx;
							padding: 0 !important;
							border: none;
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.7);
						}

						.input-placeholder {
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.5);
						}
					}

					.textarea {
						width: 100%;
						height: 300rpx;
						line-height: 30rpx;

						.textarea-body {
							box-sizing: border-box;
							width: 100%;
							height: 300rpx;
							border: none;
							padding: 18rpx 0rpx !important;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;

							/deep/ .u-textarea__field {
								height: auto !important;
								font-size: 25rpx;
							}
						}

						/deep/ .u-textarea--disabled {
							background-color: #fff;
						}

						.textarea-placeholder {
							font-size: 25rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 50rpx;
							letter-spacing: 3rpx;
							color: rgba(0, 0, 0, 0.5);
						}
					}
				}

				.l-value {
					width: 100%;
				}
			}
		}

	}
</style>
